import './index.scss'
import { Button, Input, Space, Table, Form, Modal, message } from 'antd';
import React, { useState, useEffect } from 'react';
import { getProjectData, searchProjectData, addProjectData, editProjectData, deleteProjectData } from '../../../../utils/zscHttpMethods/httpMethod.jsx';
import { ExclamationCircleFilled } from '@ant-design/icons';

const { confirm } = Modal


const ProjectFeature = () => {
    //获取ID
    const [editId, setEditId] = useState(1)
    //打开修改模态框
    const [openEdit, setOpenEdit] = useState(false);
    //表单
    const [form] = Form.useForm();
    //分页
    const [total, setTotal] = useState(1)
    //打开模态框
    const [open, setOpen] = useState(false);
    //表格数据
    const [data, setData] = useState([]);
    // 页数
    const [currentPage, setCurrentPage] = useState(1);
    //数据编辑处理
    const [editMessage, setEditMessage] = useState({})

    // 页面改变
    const Change = (page) => {
        setCurrentPage(page.current);
    }
    //重置
    const clear = () => {
        getData();
        form.resetFields()
    }
    //删除数据
    const deleData = (id) => {
        confirm({
            title: '确定删除该信息吗?',
            icon: <ExclamationCircleFilled />,
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                let params = { id }
                deleteProjectData(params).then(res => {
                    getData()
                    message.success(res.msg)
                })
            },
            onCancel() {
                message.warning('取消删除')
            },
        });
    }
    //处理数据
    const editData = (value) => {
        setOpenEdit(true);
        let editMessage=value
        setEditMessage(editMessage)
        setEditId(value.id)
    }
    //编辑
    const onCreate = (values) => {
        let params = {
            id: editId,
            classify: values.classify,
            project_features: values.project_features,
        }
        editProjectData(params).then(res => {
            getData()
            message.success('修改成功')
        })
        setOpenEdit(false);
    };
    // 渲染数据
    useEffect(() => {
        getData()
    }, [])
    //获取数据
    const getData = () => {
        getProjectData().then((res) => {
            let tableData = res.data
            setTotal(tableData.length)
            setData(
                res.data.map((item) => {
                    return {
                        key: item.id,
                        id: item.id,
                        project_features: item.project_features,
                        classify: item.classify
                    };
                })
            )
        })
    }
    //查询数据
    const search = (value) => {
        form.resetFields();
        searchProjectData(value).then((res) => {
            setTotal(res.data.length);
            setData(
                res.data.map((item) => {
                    return {
                        key: item.id,
                        id: item.id,
                        project_features: item.project_features,
                        classify: item.classify
                    };
                })
            );
        })
        console.log(value);
    }
    //添加数据打开模态框
    const addData = () => {
        setOpen(true);
    }
    //添加数据
    const onAdd = (value) => {
        const params = value
        addProjectData(params).then(res => {
            getData()
        })
        setOpen(false);
        console.log(value);
    }

    //表头
    const columns = [
        {
            title: '排序',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
            render: (text, record, index) => index + (currentPage - 1) * 5 + 1
        },
        {
            title: '分类',
            dataIndex: 'classify',
            key: 'classify',
            align: 'center'
        },
        {
            title: '项目特色',
            dataIndex: 'project_features',
            key: 'project_features',
            align: 'center'
        },
        {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => editData(record)}>编辑</a>
                    <a onClick={() => deleData(record.id)}>删除</a>
                </Space>
            ),
        },
    ];
    return (
        <div className="max">
            <div className='top'>
                <div className='top-color'></div>
                <span className='top-text'>项目特色</span>
            </div>
            <div className='mid'>
                <Form
                    colon={false}
                    form={form}
                    onFinish={search}
                    style={{ display: 'flex' }}
                    initialValues={{
                        theKey: ''
                    }}
                >
                    <Form.Item label="关键词" name="theKey">
                        <Input placeholder="请输入关键词" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                        <Button type="default" onClick={() => clear()}>清空</Button>
                    </Form.Item>
                </Form>
                <div className='add'>
                    <Button type="primary" onClick={() => addData()}>添加</Button>
                </div>
            </div>
            <div className='bot'>
                <Table columns={columns} dataSource={data} pagination={{
                    defaultCurrent: 1, total, defaultPageSize: 5, hideOnSinglePage: true
                }} rowKey={(record) => record.id} current={currentPage} onChange={Change} />
            </div>
            {/* 添加 */}
            <div>
                <CollectionCreateForm
                    open={open}
                    onAdd={onAdd}
                    onCancel={() => {
                        setOpen(false);
                    }}
                />
            </div>
            {/* 编辑 */}
            <div>
                <CollectionEditForm
                    openEdit={openEdit}
                    onCreate={onCreate}
                    onCancel={() => {
                        setOpenEdit(false);
                    }}
                    editMessage={editMessage}
                />
            </div>
        </div>
    )
}
//添加弹框
const CollectionCreateForm = ({ open, onAdd, onCancel, evaluation_content }) => {
    const [form] = Form.useForm();
    useEffect(() => {
        form.setFieldsValue(evaluation_content)
    }, [evaluation_content])
    return (
        <Modal
            open={open}
            title="添加城市"
            okText="确定"
            cancelText="取消"
            onCancel={onCancel}
            forceRender
            onOk={() => {
                form
                    .validateFields()
                    .then((values) => {
                        form.resetFields();
                        onAdd(values);
                    })
                    .catch((info) => {
                    });
            }}
        >
            <Form
                form={form}
                layout="vertical"
                name="form_in_modal"
            >
                <Form.Item name="classify" label='分类'>
                    <Input />
                </Form.Item>
                <Form.Item name="project_features" label='项目特色'>
                    <Input />
                </Form.Item>
            </Form>
        </Modal>
    );
}
//编辑弹框
const CollectionEditForm = ({ openEdit, onCreate, onCancel,editMessage }) => {
    const [form] = Form.useForm();
    useEffect(() => {
        form.setFieldsValue(editMessage)
    }, [editMessage])
    return (
        <Modal
            open={openEdit}
            title="编辑区域"
            okText="确定"
            cancelText="取消"
            onCancel={onCancel}
            onOk={() => {
                form
                    .validateFields()
                    .then((values) => {
                        form.resetFields();
                        onCreate(values);
                    })
                    .catch((info) => {
                    });
            }}
        >
            <Form
                form={form}
                layout="vertical"
                name="form_in_modal"
                initialValues={{
                    status: '通过',
                }}
            >
                <Form.Item name="classify" label='分类'>
                    <Input />
                </Form.Item>
                <Form.Item name="project_features" label='项目特色'>
                    <Input />
                </Form.Item>
            </Form>
        </Modal>
    );
}
export default ProjectFeature